<!--
 * @Autor: Ruohong Yu
 * @Date: 2021-11-27 16:40:05
 * @LastEditors: Ruohong Yu
 * @LastEditTime: 2021-12-23 14:29:14
 * @Description: 项目二审
 * @FilePath: \mimalld:\桌面\作业\软件工程\前端\front_regit\src\views\projectexam\SecondExam.vue
-->

<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name:'WorkPlace' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>项目审核</el-breadcrumb-item>
      <el-breadcrumb-item>项目二审</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="sousuo">
      <el-input v-model="input" style="width:50%" placeholder="请输入项目名称" />
      <el-button type="primary" @click="search">搜 索</el-button>
    </div>

    <div class="contain">
      <div class="shaixuan" :style="iszhankai?'height:105px':'height:35px'">
        <span class="danwei">单位：</span>
        <div class="everysc" :style="iszhankai?'overflow:visible':'overflow:hidden'">
          <div :class="f?'departxz':'depart'" @click="qb()">全部</div>
          <div v-for="(item,index) in depart" :key="index" :class="index===number?'departxz':'depart'" @click="sxxs(item,index)">
            {{ item.departmentName }}
          </div>
          <span v-if="!iszhankai" class="zhankai" @click="collapse">展开 <i class="el-icon-arrow-down" /></span>
          <span v-if="iszhankai" class="zhankai" @click="collapse">折叠 <i class="el-icon-arrow-up" /></span>
        </div>
      </div>

      <div class="shaixuan2">
        <span class="shengheqk">审核情况：</span>
        <div class="everydi">
          <div v-for="(item,index) in shenghestate" :key="index" :class="index===number1?'qkxz':'qk'" @click="getdown(index)">
            {{ item.name }}
          </div>
        </div>
      </div>

      <div class="down">
        <div v-if="!isnull" class="everyxm">
          <div v-for="(item,index) in displayproject" :key="index" class="xm" @click="godetail(item)">
            <img :src="item.fileMap.logo?item.fileMap.logo:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'" alt="">
            <div class="miaoshu">
              <div class="title">
                {{ item.projectName }}
              </div>
              <!-- eslint-disable-next-line vue/html-quotes -->
              <el-tooltip class="item" effect="light" :content="item.introduction" placement="bottom-start">
                <div class="intro">
                  {{ item.introduction }}
                </div>
              </el-tooltip>
              <div class="xiangq">
                查看详情>>
              </div>
            </div>
          </div>
        </div>
        <div v-if="isnull" class="wu">
          暂无数据
        </div>
      </div>
      <el-pagination
        style="text-align: right;"
        :current-page="currentPage"
        :page-sizes="[8, 12, 16, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import crypto from '../../crypto/crypto'
export default {
  name: 'Secondexam',
  data() {
    return {
      depart: [],
      iszhankai: false,
      input: '',
      project: [],
      shenghestate: [
        { name: '全部' },
        { name: '未审核' }],
      passproject: [],
      unpassproject: [],
      displayproject: [],
      currentPage: 1,
      pageSize: 8,
      totalNum: 0,
      number1: 0,
      number: -1,
      curdepartId: 0,
      isnull: 0,
      f: 1,
      pageflag: 0,
      getdownin: 0
    }
  },
  created() {
    this.getdepart()
    this.qb()
  },
  methods: {
    getdown(index) {
      this.currentPage = 1
      this.pageSize = 8
      this.pageflag = 3
      this.getdownin = index
      this.pageflag = 2
      this.getdownindex(index)
    },

    /**
     * @description: 筛选项目情况
     * @param {*} index
     * @return {*}
     * @author: Ruohong Yu
     */
    getdownindex(index) {
      this.number1 = index
      this.displayproject = []
      if (index === 0) {
        axios.get('/pe/getAllByStAndDe/2', {
          pageNum: 1,
          pageSize: 8,
          departmentId: this.curdepartId
        })
          .then(res => {
            if (res.data.data === null) {
              this.isnull = 1
            } else {
              this.isnull = 0
              this.project = res.data.data.list
              this.displayproject = this.project
              // console.log(this.displayproject)
              this.totalNum = res.data.data.list.length
            }
          })
          .catch(err => {
            console.error(err)
          })
      } else {
        if (this.curdepartId === 0) {
          axios.post('/pe/getAllByStAndDe/2', {
            pageNum: 1,
            pageSize: 8,
            statusId: this.number1 + 1
          })
            .then(res => {
              if (res.data.data === null) {
                this.isnull = 1
              } else {
                this.displayproject = res.data.data.list
                // console.log(this.displayproject)
                this.totalNum = this.displayproject.length
              }
            })
            .catch(err => {
              console.error(err)
            })
        } else {
          axios.post('/pe/getAllByStAndDe/2', {
            pageNum: 1,
            pageSize: 8,
            departmentId: this.curdepartId,
            statusId: this.number1 + 1
          })
            .then(res => {
              if (res.data.data === null) {
                this.isnull = 1
              } else {
                this.displayproject = res.data.data.list
                // console.log(this.displayproject)
                this.totalNum = this.displayproject.length
              }
            })
            .catch(err => {
              console.error(err)
            })
        }
      }
    },

    /**
     * @description: 获得全部数据
     * @param {*}
     * @return {*}
     * @author: Ruohong Yu
     */
    qb() {
      this.f = 1
      this.number = -1
      this.number1 = 0
      this.curdepartId = 0
      axios.get('pe/getAll/2', {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      })
        .then(res => {
          // console.log(res)
          if (res.data.data) {
            this.project = res.data.data.list
            this.displayproject = this.project
            this.totalNum = res.data.data.total
          }
        })
        .catch(err => {
          console.error(err)
        })
    },

    /**
     * @description: 学院选择
     * @param {*} item
     * @param {*} index
     * @return {*}
     * @author: Ruohong Yu
     */
    sxxs(item, index) {
      this.f = 0
      this.number = index
      this.number1 = 0
      this.curdepartId = item.departmentId
      this.pageflag = 1
      this.sxxsindex()
    },
    sxxsindex() {
      axios.get('/pe/searchPEByDeId/2', {
        params: { pageNum: 1,
          pageSize: 8,
          departmentId: this.curdepartId }
      })
        .then(res => {
          if (res.data.data === null) {
            this.isnull = 1
          } else {
            this.isnull = 0
            this.project = res.data.data.list
            this.displayproject = this.project
            this.totalNum = res.data.data.list.length
          }
        })
        .catch(err => {
          console.error(err)
        })
    },

    /**
     * @description: 搜索框功能
     * @param {*}
     * @return {*}
     * @author: Ruohong Yu
     */
    search() {
      axios.get('/pe/searchPEByName/2', { params: { projectName: this.input }})
        .then((res) => {
          this.displayproject = res.data.data.list
          this.totalNum = res.data.data.total
        })
    },

    /**
     * @description: 项目详情
     * @param {*} row
     * @author: Ruohong Yu
     */
    godetail(row) {
      var pa = crypto.set('26')
      this.projectName = row.projectName
      this.peId = row.peId
      this.introduction = row.introduction
      this.team = row.team
      this.logo = row.fileMap.logo
      this.list = row
      sessionStorage.setItem('Team', JSON.stringify(this.team))
      sessionStorage.setItem('data', JSON.stringify(this.projectName))
      sessionStorage.setItem('key', JSON.stringify(this.peId))
      sessionStorage.setItem('Introduction', JSON.stringify(this.introduction))
      sessionStorage.setItem('Logo', JSON.stringify(this.logo))
      sessionStorage.setItem('List', JSON.stringify(this.list))
      this.$router.push({ path: '/' + pa, params: { data: this.projectName, key: this.peId, Team: this.team, Introduction: this.introduction, List: this.list }})
    },

    /**
     * @description: 获取学院
     * @param {*}
     * @return {*}
     * @author: Ruohong Yu
     */
    getdepart() {
      axios.get('/dictionary/searchAll/department')
        .then(res => {
          this.depart = res.data.data
        })
        .catch(err => {
          console.error(err)
        })
    },
    collapse() {
      this.iszhankai = !this.iszhankai
    },

    /**
     * @description: 每页显示条数变化
     * @param {*} val
     * @return {*}
     * @author: Ruohong Yu
     */
    handleSizeChange(val) {
      this.pageSize = val
      if (this.pageflag === 0) {
        this.qb()
      } else if (this.pageflag === 1) {
        this.sxxsindex()
      } else {
        this.getdownindex(this.getdownin)
      }
    },

    /**
     * @description: 页数变化
     * @param {*} val
     * @return {*}
     * @author: Ruohong Yu
     */
    handleCurrentChange(val) {
      this.currentPage = val
      if (this.pageflag === 0) {
        this.qb()
      } else if (this.pageflag === 1) {
        this.sxxsindex()
      } else {
        this.getdownindex(this.getdownin)
      }
    }
  }
}
</script>

<style lang="scss">
@import '../../assets/css/font.scss';
.sousuo{
  margin: 20px auto;
  padding-bottom: 30px;
  padding-left: 25%;
  border-bottom: 1px solid rgb(221, 221, 221);
}
.shaixuan2{
  height: 35px;
  border-bottom: 1px solid rgb(221, 221, 221);
  position: relative;
  .shengheqk{
    position: absolute;
    left: 82px;
    top: 8px;
    font-weight: 300;
  }
  .everydi{
    display: inline-block;
    display: flex;
    flex-flow:row wrap;
    max-width: 90%;
    min-width: 90%;
    width: 84%;
    height: 30px;
    overflow: hidden;
    position: relative;
    left: 150px;
    top: 5px;
    .qk{
      font-size: 14px;
      font-weight: 200;
      height: 20px;
      padding: 2px 5px;
      text-align: center;
      margin: 2px 10px;
      cursor: pointer;
    }
    .qk:hover{
      color: aliceblue;
      background-color: $colorA;
      border-radius: 5px;
    }
    .qkxz{
      font-size: 14px;
      font-weight: 200;
      height: 20px;
      padding: 2px 5px;
      text-align: center;
      margin: 2px 10px;
      cursor: pointer;
      color: aliceblue;
      background-color: $colorA;
      border-radius: 5px;
    }
  }

}
.shaixuan{
  height: 105px;
  transition: all .5s;
  border-bottom: 1px solid rgb(221, 221, 221);
  position: relative;
  .danwei{
    position: absolute;
    left: 82px;
    top: 1px;
    font-weight: 300;
  }
  .everysc{
    display: inline-block;
    display: flex;
    flex-flow:row wrap;
    max-width: 90%;
    min-width: 90%;
    height: 30px;
    overflow: hidden;
    position: relative;
    left: 150px;
    .depart{
      font-size: $fontJ;
      font-weight: 200;
      height: 20px;
      padding: 2px 5px;
      text-align: center;
      margin: 2px 10px;
      cursor: pointer;
    }
    .depart:hover{
      color: aliceblue;
      background-color: $colorA;
      border-radius: 5px;
    }
    .departxz{
      font-size: $fontJ;
      font-weight: 200;
      height: 20px;
      padding: 2px 5px;
      text-align: center;
      margin: 2px 10px;
      cursor: pointer;
      color: aliceblue;
      background-color: $colorA;
      border-radius: 5px;
    }
    .zhankai{
      position: absolute;
      top: 3px;
      right: 0px;
      font-weight: 300;
      cursor: pointer;
      color: $colorA;
    }
  }
}

.down{
  width: 100%;
  margin: 20px auto;
  .wu{
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    font-weight: 200;
    color: #aaadaf;
    margin: 100px auto;
  }
  .everyxm{
    display: flex;
    flex-flow:row wrap;
    width: 90%;
    margin-left: 5%;
    max-width: 90%;
    min-width: 90%;
    .xm{
      //width: 267px;
      width: 22%;
      height: 285px;
      margin: 10px;
      border: 1px solid rgb(221, 221, 221);
      border-radius: 5px;
      cursor: pointer;
      box-shadow: 0px 0px 10px 1px rgb(214, 214, 214);
      position: relative;
      img{
        width: 100%;
        height: 173px;
      }
      .miaoshu{
        margin: 5px 20px;
        .title{
          font-weight: 600;
          font-size: 15px;
          margin: 10px 0px;
        }
        .intro{
          margin: 10px 0px;
          height: 20px;
          font-weight: 200;
          font-size: $fontJ;
          text-overflow:ellipsis;
          overflow: hidden;
          white-space:nowrap;
        }
      }
      .xiangq{
        position: absolute;
        font-size: $fontJ;
        color: $colorA;
        right: 5px;
      }
    }
    .xm:hover{
      transform: scale(1.05,1.05);
    }
  }
}
.el-tooltip__popper{
  max-width: 250px;
}
</style>
